package com.leil.project

import androidx.compose.animation.ContentTransform
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.Image
import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.foundation.background
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.AddBox
import androidx.compose.material.icons.outlined.CreateNewFolder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Search
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material.icons.outlined.Today
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.PermanentNavigationDrawer
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import todo.composeapp.generated.resources.Res
import todo.composeapp.generated.resources.left_panel_close
import todo.composeapp.generated.resources.left_panel_open
import todo.composeapp.generated.resources.taiyi


enum class ExpandedState {
    ON, OFF
}

enum class NavItem(
    val label: String,
    val icon: ImageVector,
    val contentDescription: String
) {
    SEARCH("搜索", Icons.Outlined.Search, "Search"),
    TODAY("今日待办", Icons.Outlined.Today, "Today"),
    IMPORTANT("重要事项", Icons.Outlined.StarBorder, "Important"),
    DEFAULT_TASK("默认分组", Icons.Outlined.Home, "Default Task"),
    ADD_LIST("添加分组", Icons.Outlined.CreateNewFolder, "Add List"),
    ADD_TASK("添加待办", Icons.Outlined.AddBox, "Add Task")
}


infix fun EnterTransition.with(exit: ExitTransition) = ContentTransform(this, exit)

@Preview()
@Composable
fun Nav() {

    var expanded by remember { mutableStateOf(ExpandedState.OFF) }

    // 创建动画
    val transition = updateTransition(targetState = expanded)
    // 动画变量
    val drawerWith by transition.animateDp { if (it == ExpandedState.ON) 200.dp else 60.dp }
    val headImageSize by transition.animateDp { if (it == ExpandedState.ON) 70.dp else 50.dp }


    val state = rememberLazyListState()


    PermanentNavigationDrawer(
        drawerContent = {
            Column(
                modifier = Modifier.fillMaxHeight()
                    .width(drawerWith)
                    .background(MaterialTheme.colorScheme.surfaceContainer)
                    .padding(5.dp),
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                Column {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                    ) {
                        Image(
                            painter = painterResource(Res.drawable.taiyi),
                            contentDescription = "Head",
                            modifier = Modifier.size(headImageSize).clip(CircleShape)
                        )
                        if (transition.targetState == ExpandedState.ON && transition.currentState == transition.targetState) {
                            Spacer(modifier = Modifier.width(5.dp))
                            Text(
                                "Leil's TO DO",
                                style = MaterialTheme.typography.titleMedium,
                                modifier = Modifier.align(Alignment.CenterVertically)
                            )
                        }
                    }


                    NavItem.entries.forEach {
                        val interactionSource = remember { MutableInteractionSource() }
                        val isHovered by interactionSource.collectIsHoveredAsState()
                        Row(verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier.fillMaxWidth().clip(RoundedCornerShape(5.dp)).hoverable(interactionSource)
                                .background(if (isHovered) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceContainer)) {
                            IconButton(onClick = {}) {
                                Icon(it.icon, contentDescription = it.contentDescription)
                            }
                            if (transition.targetState == ExpandedState.ON && transition.currentState == transition.targetState) {
                                Spacer(modifier = Modifier.width(5.dp))
                                Text(
                                    it.label,
                                    style = MaterialTheme.typography.titleSmall,
                                )
                            }
                        }
                    }
                }
                if (transition.targetState == ExpandedState.ON && transition.currentState == transition.targetState) {
                    Box(modifier = Modifier.fillMaxWidth().weight(1f)) {
                        LazyColumn(
                            state = state,
                            modifier = Modifier.fillMaxSize()
                        ) {
                            items(30) { index ->
                                Row {
                                    Spacer(modifier = Modifier.width(40.dp))
                                    Text(
                                        "未命名分组 $index",
                                        style = MaterialTheme.typography.titleSmall
                                    )
                                }
                            }
                        }
                        VerticalScrollbar(
                            adapter = rememberScrollbarAdapter(state),
                            modifier = Modifier.fillMaxHeight().align(Alignment.CenterEnd)
                        )
                    }
                }
                Column {
                    Row(verticalAlignment = Alignment.CenterVertically) {

                        IconButton(onClick = {
                            expanded =
                                if (expanded == ExpandedState.ON) ExpandedState.OFF else ExpandedState.ON
                        }) {
                            Icon(
                                painter = painterResource(if (expanded == ExpandedState.ON) Res.drawable.left_panel_close else Res.drawable.left_panel_open),
                                contentDescription = "打开/收回列表"
                            )
                        }
                    }
                }
            }
        }
    ) {
        Row(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.surface)) {
            Button(onClick = {
                expanded = if (expanded == ExpandedState.ON) ExpandedState.OFF else ExpandedState.ON
            }) {
                Box() {
                    Text(text = if (expanded == ExpandedState.ON) "收起" else "展开")
                }
            }

        }

    }
}